<template>
	
	<view>
			<view class="diqu">
			<view class="city">
				<text class="city_text" @click="chooseLocation">点击选择</text>
				<!-- <button class="but" size="mini" type="default" style="float: left;">
				{{mycity}}</button> -->
				
				<!-- <image src="/static/index_image/down.png"></image> -->
			</view>
			<view class="but"><text class="but_text">{{mycity}}</text></view>
			</view>
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map :style="{position:position, width:width, height:height}" id="map" :scale="scale" show-location="true" :latitude="latitude" :longitude="longitude" :markers="covers" >
					</map>
					
					<view class="map_tips_box">
						<view class="tips_tiem" @click="MyLocation">
							<image src="/static/index_image/focus.png"></image>
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="search main_bg_color">
				<view class="search_in">
					<image src="/static/index_image/shou.png"></image>
					<input placeholder="请输入搜索内容" placeholder-class="pla" :value="searchdata" @input="searchInput" @confirm="goSearch"/>
					<image class="clear_btn" src="/static/index_image/clear.png" v-if="clear" @click="clearInput"></image>
				</view>
				<view class="change_map" @click="changeMap">
					<image :src="changemap == true?'/static/index_image/up.png':'/static/index_image/Down-3.png'"></image>
				</view>
			</view>
			
			
			<view class="divBody" v-show="nmenus">
			<view class="divMenu">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :style="{height:`${home_page_height}upx`}" @scroll="scroll">
					<view class="scroll-view-item bubble"  v-for="(item, index) in near" :key="index" @click="nearLocation(item)">
							<view>
								<view class="divName">{{ '名称：'+item.title }}</view>
								<view class="divDesc">{{ '类别：'+item.category+'  电话：' + item.tel }}</view>
								<view class="divDesc">{{ '地址：' + item.address }}</view>
								<view class="divDesc">{{ '距离：' + numFilter(item._distance/1000) +'km'}}</view>
							</view>
					</view>
					<view id="d"/>
				</scroll-view>
				
				<view @tap="goTop" class="uni-link uni-center uni-common-mt">
					点击返回顶部
				</view>
				
				</view>
			</view>
			
			
			
			<view class="nothing text_blue" v-if="lennear">
				<image src="/static/index-image/null.png"></image>
				<view @click="onShow">暂时没有数据.点击刷新</view>
			</view>
			<view class="bottom_box"></view>
			
			
	</view>
	
	
</template>

 <!-- <script type="module" src="/common/qqmap-wx-jssdk.min.js"> -->
<!-- //         import QQMapWX from '/common/qqmap-wx-jssdk.min'
//         let qqmapsdk; -->
<script>
	import QQMapWX from '../../common/qqmap-wx-jssdk.js'
	let tMap 
	
	export default{
		data(){
		return{
			mycity:"选择地区",
			id:"map", // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 30.37559,
			longitude: 114.32168,
			covers:[],
			scale:15,
			changemap:false,
			position:'relative',
			width:'100%',
			height:'50vh',
			makers:[],
			near:[],
			clear:false,
			searchdata:'',
			nmenus:false,
			lennear:false,
			scrollTop: 0,
			old: {scrollTop: 0},
			home_page_height:0,
		}
		},
		methods:{
			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
					},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				},
			mapSearch(keyword,location){
							console.log(keyword,location,"keyword,location")
								let promise = new Promise(function(resolve, reject) {
									// 调用接口
									      tMap.search({
												keyword: keyword,//搜索关键词
												location:location ,  //设置周边搜索中心点
									          success: function (res) {
									             resolve(res)
									          },
									          fail: function (res) {
									             reject(res)
									          }
									  });
								})
								return promise
								  
			},
			searchnear(key){
				console.log('ss')
				let location= this.latitude + ',' + this.longitude
				this.mapSearch(key,location).then(res => {
								this.near = res.data
								if(key && this.near.length){
									this.nmenus = true
								}else{
									this.nmenus = false
								}
								
					  		},error => {
								// self.$api.msg('请求失败')
								// console.log(error,"aaaaaaaaaaa");
						})
				console.log("near:",this.near)
			},
			goSearch(){
				let myCity=uni.getStorageSync('MyCity')
				if(myCity != ''){
					uni.stopPullDownRefresh()
					uni.hideNavigationBarLoading()
					let key =this.searchdata
					if(key){
						this.searchnear(key)
					}else{
						uni.showToast({
							title:'请输入搜索内容',
							icon:'none',
							duration:800
						})
					}
				}else{
					uni.stopPullDownRefresh()
					uni.hideNavigationBarLoading()
					this.mycity="选择地区"
					uni.showToast({
						title:'请先点击选择地区定位',
						icon:'none',
						duration:9000,
					})	
				}
				
			},
			searchInput(e){
				let myCity=uni.getStorageSync('MyCity')
				if(myCity != ''){
					uni.stopPullDownRefresh()
					uni.hideNavigationBarLoading()
					let value=e.detail.value
					console.log("编辑了搜索输入框",value)
					if(value == ''){
						this.markers=[]
						this.near=[]
						this.clear=false
					}else{
						this.searchdata=value
						this.clear=true
					}
				}else{
					uni.stopPullDownRefresh()
					uni.hideNavigationBarLoading()
					this.mycity="选择地区"
					uni.showToast({
						title:'请先点击选择地区定位',
						icon:'none',
						duration:9000,
					})	
				}
				
			},
			clearInput(e){
				this.markers=[]
				this.near=[]
				this.searchdata=''
				this.clear=false
			},
			
			changeMap(){
				let changemap = this.changemap
				console.log('点击了动态改变地图大小',changemap)
				if(changemap == false){
					this.changemap=true
					this.position='relative'
					this.width='100%'
					this.height='90vh'
					
				}else{
					this.changemap=false
					this.position='relative'
					this.width='100%'
					this.height='50vh'
				}
			},
			
			
			chooseLocation(){
				console.log("点击了选择地区")
				uni.getLocation({
					type:"gcj02",
					success(res) {
						let longitude=res.longitude;
						let latitude=res.latitude;
						console.log("获取经纬度成功:",res)
						uni.chooseLocation({
							latitude,
							longitude,
							success(res) {
								console.log("选择地区成功:",res)
								uni.setStorageSync('MyCity',res)
								this.getMyCity()
							},
							fail(err) {
								console.log("选择地区失败:",err)
							}
						})
						},
						fail(err) {
							console.log("授权位置信息失败:",err)
							uni.showModal({
								title:"申请授权位置信息",
								content:"请手动打开获取位置信息",
								confirmText:"去设置",
								success(res) {
									if(res.confirm){
										uni.openSetting()
									}
								}
							})
						}
						
					})
			},
			
			getMyCity(){
			let myCity=uni.getStorageSync('MyCity')
			if(myCity != ''){
				this.mycity=myCity.name,
				this.longitude=myCity.longitude,
				this.latitude=myCity.latitude
				let covers={id:0, latitude: this.latitude,longitude: this.longitude,
			 	iconPath: '/static/index_image/location01.png',}
				this.covers.push(covers)
			}else{
				this.mycity="选择地区",
				uni.showToast({
					title:'请先点击选择地区定位',
					icon:'none',
					duration:9000,
				})	
			}
			},
			
			MyLocation(){
				let mpC = uni.createMapContext("map")
				mpC.moveToLocation({
					latitude:this.latitude,
					longitude:this.longitude
				})
			},
			nearLocation(item){
				let covers={id:1, latitude: item.location.lat,longitude: item.location.lng,
				iconPath: '/static/index_image/location01.png'}
				if(this.covers.length<2){this.covers.push(covers)}
				if(this.covers.length==2){
					this.covers[1]=covers
				}
				let mpC = uni.createMapContext("map")
				mpC.moveToLocation({
					latitude:item.location.lat,
					longitude:item.location.lng
				})
			},
			// async getLocation(){
			// 	return new Promise((resolve)=>{
			// 	let locationed={
			// 	longitude:0,
			// 	latitude:0,
			// 	province:"",
			// 	city:"",
			// 	area:"",
			// 	street:"",
			// 	address:"",
			// }
			// 	uni.getLocation({
			// 		type:"gcj02",
			// 		success(res) {
			// 			locationed.longitude=res.longitude;
			// 			locationed.latitude=res.latitude;
			// 			tMap.reverseGeocoder({
			// 				location,
			// 				success(response){
			// 					let info = response.result
			// 					console.log(info)
			// 					locationed.province=info.address_component.province
			// 					locationed.city=info.address_component.city
			// 					locationed.area=info.address.district
			// 					locationed.street=info.address_component.street
			// 					locationed.address=info.address
			// 					resolve(locationed)
			// 					this.location=locationed
			// 					console.log(locationed)
			// 					this.longitude=this.location.longitude
			// 					this.latitude=this.location.latitude
			// 				}
			// 			})
			// 		},
			// 		fail(err){
			// 			console.log(err)
			// 			resolve(locationed)
			// 		}

			// 	})
			// })
			// },
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
			
		},
		onLoad() {
			
			tMap = new QQMapWX({
				key: 'TMYBZ-UZY3W-SD7RM-3CPZM-L2P36-YVFAM'
			})
			// this.getLocation()
			
		},
		onShow() {
			let myCity=uni.getStorageSync('MyCity')
			if(myCity != ''){
				uni.stopPullDownRefresh()
				uni.hideNavigationBarLoading()
				this.getMyCity()
			}else{
				uni.stopPullDownRefresh()
				uni.hideNavigationBarLoading()
				this.mycity="选择地区"
				uni.showToast({
					title:'请先点击选择地区定位',
					icon:'none',
					duration:9000,
				})	
			}
		
		
		//
		},
		onReady() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#d').boundingClientRect(data => {
					console.log(data.bottom)
					this.home_page_height=data.top*2;
				}).exec();
		},
		
	
	
}
	
	
	
</script>

<style scoped>
	.diqu{
		position: relative;
		width: 100%;
		height: 40upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.city{
		width: 15%;
		height: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background-color: #feca50;
	}
	.city_text{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit -box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		text-align: center;
		font-size: 20upx;
		font-weight: bolder;
		color: #000000;
		flex-direction: row;
		align-items: center;
		width: 80%;
		height: 40upx;
		border: 3rpx solid #000000;
		left: 10%;
		border-radius: 30upx;
		background-color: #fff;
	}
	.but{
		position: relative;
		width: 85%;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background-color: #feca50;
		font-size: 30upx;
		border: ;
		text-align: center;
	}
	.but_text{
		display: flex;
		align-items: center;
		text-align: center;
	}
	/* .city image{
		padding: 0 5upx 0 5upx;
		width: 30upx;
		height: 30upx;
	} */
	.map_tips_box{
		position: absolute;
		right: 10upx;
		top:30%;
	}
	.tips_tiem{
		margin: 10upx;
		padding: 10upx;
		width: 80upx;
		height: 80upx;
	}
	.tips_tiem image{
		width: 100%;
		height: 100%;
	}
	
	.search{
		height: 80upx;
		padding: 10upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 30upx 30upx 0 0;
	}
	.change_map{
		flex: 1;
		z-index: 999;
		padding: 20upx;
		width: 200upx;
		text-align: center;
	}
	.change_map image{
		width: 60upx;
		height: 50upx;
	}
	.search{
		background: #feca50;
		border-radius: 6upx;
	}
	.search_in{
		margin: 10upx;
		position:relative;
		width: 80%;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		border-radius: 45upx;
		background-color: #FFFFFF;
	}
	.pla{
		text-align: center;
	}
	.search_in image{
		width: 42upx;
		height: 45upx;
		margin: 15upx;
	}
	.search input{
		position: absolute;
		left: 60upx;
	}
	.nothing{
		margin-top: 100upx;
		padding: 15upx;
		text-align: center;
	}
	.nothing image{
		width: 150upx;
		height: 90upx;
	}
	.bottom_box{
		height: 20upx;
	}
	.divBody.divMenu{
		height: 38vh;
	}
	.scroll-Y {
		height: 36vh;
		background: #feca50;
		}
	.scroll-view-item {
		height: 200rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
		background: #fff;
		color: #fff;
		border-radius: 15px;	
		border: 3rpx solid #6699FF;
	}
	.bubble {
			position: relative;
			overflow: hidden;
		}
	.bubble:after {
		content: "44444";
		background: #5c9899;
		position: absolute;
		width: 750rpx;
		height: 750rpx;
		left: calc(50% - 375rpx);
		top: calc(50% - 375rpx);
		opacity: 0;
		margin: auto;
		border-radius: 50%;
		transform: scale(1);
		transition: all 0.5s ease-in-out;
	}
	.bubble:active:after {
		transform: scale(0);
		opacity: 1;
		transition: 0s;
	}
	.uni-link{
		text-align: center;
		background: #feca50;
	}
	.scroll-view-item .divName {
	  height: 50rpx;
	  opacity: 1;
	  font-size: 32rpx;
	  font-family: PingFangSC, PingFangSC-Semibold;
	  font-weight: 600;
	  text-align: left;
	  color: #333333;
	  line-height: 44rpx;
	  letter-spacing: 0;
	  margin-bottom: 10rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  width: 100%;
	  right: 10%;
	  text-align: center;
	}
	
	 .scroll-view-item .divDesc {
	  height: 50rpx;
	  opacity: 1;
	  font-size: 24rpx;
	  font-family: PingFangSC, PingFangSC-Regular;
	  font-weight: 400;
	  text-align: left;
	  color: #666666;
	  line-height: 32rpx;
	  letter-spacing: 0rpx;
	  margin-bottom: 8rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  width: 100%;
	  right: 10%;
	  text-align: center;
	}

	 
	 

</style>

